﻿<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
  <link rel="stylesheet" href="../css/reset.css" />
  <link rel="stylesheet" href="css/layui.css" />
  <link rel="stylesheet" href="css/jzkwt2.css" />
  <title>查询列表模板</title>
<body>
	<h1>变化点指示灯示意图</h1>
	<div id="wrap">
		<div id="line1" data-after="SM 9B前底板线">
			<div id="wrapImg1">
				<img id="img1" data-src="img/line-a.png" alt="" />
						  		<div data-no="1-OP15"></div>
					     		<div data-no="1-OP01"></div>
					     		<div class="no-materiel" data-no="1-OP08"></div>
				     			<div data-no="1-OP07"></div>
			</div>
		</div>
		<div id="line2">
			<div id="wrapImg2">
				<img id="img2" data-src="img/line-b.png" alt="" />
				     		<div data-no="2-OP40"></div>
				     		<div data-no="2-OP50"></div>
				     		<div data-no="2-OP60"></div>
				     		<div data-no="2-OP58"></div>
				     		<div data-no="2-OP20"></div>
				     		<div data-no="2-OP10"></div>
			</div>
		</div>
		<div id="line3">
			<div id="wrapImg3">
				<img id="img3" data-src="img/line-c.png" alt="" />
						
				     	<div class="no-materiel" data-after="3-OP150R"></div>
				     	<div class="no-materiel" data-after="3-OP90R"></div>
				     	<div data-no="3-OP80R"></div>
				     		<div data-no="3-OP70R"></div>
				     		<div class="no-materiel" data-no="3-OP65R"></div>
				     		<div data-no="3-OP20R"></div>
				     		<div data-no="3-OP10R"></div>
				     		<div data-no="3-OP130R"></div>
				     		<div data-no="3-OP120R"></div>
				     		<div class="no-materiel"  data-no="3-OP150L"></div>
				     		<div class="no-materiel" data-no="3-OP90L"></div>
				     		<div data-no="3-OP80L"></div>
				     		<div data-no="3-OP70L"></div>
				     		<div class="no-materiel" data-no="3-OP65L"></div>
				     		<div data-no="3-OP20L"></div>
				     		<div data-no="3-OP10L"></div>
				     		<div data-no="3-OP130L"></div>
				     		<div data-no="3-OP120L"></div>
			</div>
		</div>
		<div id="line4">
			<div id="wrapImg4">
				<img id="img4" data-src="img/line-d.png" alt="" />
								<div data-no="4-OP30L"></div>
				     		<div data-no="4-OP40L"></div>
				     		<div data-no="4-OP50L"></div>
				     		<div data-no="4-OP60L"></div>
				     		<div class="no-materiel" data-no="4-OP70L"></div>
				     		<div class="no-materiel" data-no="4-OP80L"></div>
				     		<div data-no="4-OP90L"></div>
				     		<div class="no-materiel" data-no="4-OP100L"></div>
				     		<div data-no="4-OP110L"></div>
				     		<div data-no="4-OP120L"></div>
				     		<div class="no-materiel" data-no="4-OP130L"></div>
				     		<div class="no-materiel" data-no="4-OP140L"></div>
				     	<div data-no="4-OP20L"></div>
				     	<div class="no-materiel" data-no="4-OP180L"></div>
				     	<div data-no="4-OP10L/R"></div>
				     	<div data-no="4-OP20R"></div>
				     	<div class="no-materiel" data-no="4-OP180R"></div>
				     		<div data-no="4-OP30R"></div>
				     		<div data-no="4-OP40R"></div>
				     		<div data-no="4-OP50R"></div>
				     		<div data-no="4-OP60R"></div>
				     		<div class="no-materiel" data-no="4-OP70R"></div>
				     		<div class="no-materiel" data-no="4-OP80R"></div>
				     		<div data-no="4-OP90R"></div>
				     		<div class="no-materiel" data-no="4-OP100R"></div>
				     		<div data-no="4-OP110R"></div>
				     		<div data-no="4-OP120R"></div>
				     		<div class="no-materiel" data-no="4-OP130R"></div>
				     		<div class="no-materiel" data-no="4-OP140R"></div>
			</div>
		</div>
	</div>
	<div class="layui-row map-tip-info">
			<ul>
				<li><i class="normal"></i><span>正常</span></li>
				<li><i class="light-up-d"></i><span>亮灯状态</span></li>
			</ul>
		</div>
</body>
<script src="http://47.95.197.74:8090/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
  <script>
/**
 * 支持IE9及以上
 * @param {Object} wrap 图片要存放的容器的选择器。 
 * @param {Object} pre  图片的选择器 || 或图片对象。图片的地址为data-src
 */
function setImgWidth(wrap,pre,fn){//设置图片等比例缩放。
		var H = $(wrap).height(),W=$(wrap).width(); 
		function setSize(){//原理： 最大的要放到最小的里边去。
			var d=this,si,w,h,o = {
					h:d.naturalHeight ,
					w:d.naturalWidth ,
			};
			o[d.naturalHeight] = 'h' ; 
			o[d.naturalWidth] = 'w' ;
			si=Number(Math.min((W/o.w),H/o.h).toFixed(3));
			w=Number((o.w*si).toFixed(3));
			h=Number((o.h*si).toFixed(3));
			$(d).attr('width',w+'px').attr('height',h+'px');
			fn&&fn(wrap,w,h); 
		};
		for(var a = 0,d,arr=$.type(pre)==='string'?$(pre):pre;d=arr[a];a++){
			$(d).attr('src',$(d).attr('data-src')).load(setSize);
		}
}

//new setImgWidth('#line1','#img1') ;
	for(var a = 0,d,arr=$('div[data-no]');d=arr[a];a++){
		var n=d.getAttribute('data-no') ;
		$(d).append('<span data-after="'+n+'"></span><b>'+n+'</b>')
	}
	function resiW(){
		for(var a = 1;a<5;a++){
			setImgWidth('#line'+a,'#img'+a,function(wrap,w,h){
				var $d = $(wrap);
					$d.find('>div').css({width:w,height:h}).css('margin-top',($d.height()-h>6?($d.height()-h)/2:0)+'px')
			});			
		}
	}
	onresize=resiW ;
	resiW() ;
  </script>
</html>